$(document)
		.ready(
				function() {
					var elementEdit = 'imagecontent';
					var element = '#' + elementEdit;
					var urlAction = '/' + elementEdit;
					var reloadData = function() {
						$(element).jqGrid('setGridParam', {
							datatype : 'json'
						}).trigger('reloadGrid', [ {
							page : 1
						} ]);
					}

					jQuery(element)
							.jqGrid(
									{
										url : urlAction,
										datatype : "json",
										height : "auto",
										width : "auto",
										colNames : [ 'Id', 'Title', 'Source',
												'ImageURL', 'SmallImageURL',
												'Category', 'Create At',
												'View', 'Error' ],
										colModel : [
												{
													name : 'id',
													index : 'id',
													width : 65,
													editable : true,
													editoptions : {
														readonly : true
													},
													editrules : {
														required : false
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "id"
												},
												{
													name : 'title',
													index : 'title',
													width : 200,
													editable : true,
													editrules : {
														required : true
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "title"
												},
												{
													name : 'source',
													index : 'source',
													width : 150,
													editable : true,
													editrules : {
														required : true,
													},
													edittype : "select",
													editoptions : {
														value : "Google:Google;Haivl.com:Haivl.com;Dongcam.vn:Dongcam.vn"
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "source"
												},
												{
													name : 'imageURL',
													index : 'imageURL',
													width : 100,
													editable : true,
													editrules : {
														required : true,
														url : true
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "imageURL"
												},
												{
													name : 'smallImageURL',
													index : 'smallImageURL',
													width : 100,
													editable : true,
													editrules : {
														required : true,
														url : true
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "smallImageURL"
												},
												{
													name : 'category',
													index : 'category',
													width : 200,
													editable : true,
													editrules : {
														required : true
													},
													edittype : "select",
													editoptions : {
														value : "0:Kim chi củ cải;1:Truyện bựa Hàn Quốc Xẻng;2:Haivl chọn lọc"
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "category"
												},
												{
													name : 'createAt',
													index : 'createAt',
													width : 100,
													editable : false,
													editrules : {
														required : false
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "createAt"
												},
												{
													name : 'viewNum',
													index : 'viewNum',
													width : 100,
													editable : false,
													editrules : {
														required : false
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "viewNum"
												},
												{
													name : 'errorNum',
													index : 'errorNum',
													width : 100,
													editable : false,
													editrules : {
														required : false
													},
													searchoptions : {
														sopt : [ 'bw', 'eq',
																'ne', 'ew',
																'cn' ]
													},
													jsonmap : "errorNum"
												} ],
										ignoreCase : true,
										rowNum : 20,
										rowList : [ 20, 30, 50, 100000000 ],
										loadonce : true,
										mtype : "GET",
										multiselect : true,
										rownumbers : true,
										rownumWidth : 40,
										gridview : true,
										pager : element + 'pager',
										sortname : 'name',
										viewrecords : true,
										sortorder : "asc",
										editurl : urlAction,
										caption : "Image Content",
										jsonReader : {
											repeatitems : false,
											root : function(obj) {
												return obj;
											},
											page : function(obj) {
												return 1;
											},
											total : function(obj) {
												return 1;
											},
											records : function(obj) {
												return obj.length;
											}
										},
										loadComplete : function() {
											$("option[value=100000000]").text(
													'All');
										},
										ondblClickRow : function(rowid) {
											jQuery(element)
													.jqGrid(
															'editGridRow',
															rowid,
															{
																// recreateForm
																// : true,
																closeAfterEdit : true,
																closeOnEscape : true,
																reloadAfterSubmit : false,
																afterSubmit : function() {
																	reloadData();
																	return [ true ];
																},
																beforeShowForm : function(
																		formid) {
																	$(
																			'#name',
																			formid[0])
																			.attr(
																					'readonly',
																					'readonly');
																}
															});
										}
									});
					jQuery(element).jqGrid('navGrid', element + 'pager', {
						view : true,
						excel : true,
						beforeRefresh : function() {
							reloadData();
						}
					},
					// edit option
					{
						beforeShowForm : function(formid) {
							$('#name', formid[0]).attr('readonly', 'readonly');
						},
						checkOnSubmit : true,
						closeAfterAdd : true,
						closeAfterEdit : true,
						afterSubmit : function() {
							reloadData();
							return [ true ];
						}
					},
					// add option
					{
						beforeShowForm : function(formid) {
							$('#name', formid[0]).removeAttr('readonly');
						},
						beforeSubmit : function(postdata, formid) {
							// if (checkValidAdd(postdata.name))
							return [ true, "", "" ];
							// else
							// return [ false, "Mã khoa đã tồn tại!", "" ];
						},
						afterSubmit : function() {
							// reloadData();
							return [ true ];
						}
					},
					// delete option
					{
						afterSubmit : function(response, postdata) {
							reloadData();
							if (response.responseText == "")
								return [ true ];
							else
								return [ false, response.responseText, "" ];
						}
					},
					// search option
					{
						multipleSearch : true,
						closeAfterSearch : true,
					// onInitializeSearch : updateGroupOpText,
					// afterRedraw : updateGroupOpText
					});
					jQuery(element).jqGrid('gridResize', {
						minWidth : 400,
						maxWidth : 1000,
						minHeight : 100,
						maxHeight : 500
					});
					// add filter toolbar
					jQuery(element).jqGrid('filterToolbar', {
						stringResult : true,
						searchOnEnter : false,
						defaultSearch : "bw"
					});
					jQuery(element).jqGrid('navButtonAdd', element + 'pager', {
						id : 'pager_excel',
						caption : '',
						title : 'Xuất File Excel',
						onClickButton : function(e) {
							exportData(elementEdit);
						},
						buttonicon : 'ui-icon-disk'
					});
					jQuery(element).jqGrid('navButtonAdd', element + 'pager', {
						id : 'pager_reorder_column',
						caption : '',
						title : 'Chỉnh Sửa Bảng',
						onClickButton : function(e) {
							jQuery(element).jqGrid('columnChooser', {
								width : 500
							});
						},
						buttonicon : 'ui-icon-newwin'
					});

				});
